Material Design Lite Icon Toggle
what is Icon Toggle in (MDL) ?
- Material Design Lite(MDL) component icon is used to create an Icon checkbox which is an enhanced version of HTML checkbox.
- The MDL Icon Toggle has an user defined icon which can be highlighted when selected, like a checkbox it has only two states(binary), on and off.
- Radio Buttons generally appears in a groups and selections can also be made on individual basis, MDL Radio buttons have the typical click effects.
- Similar to Checkboxes and Radio Buttons, Icon Toggles too are used in groups, and can be selected and unselected individually as well.
- Advantage of using Icon Toggles over a regular Checkbox is replacement of long text label options with visual icons(symbols), this allows more options within limited screen space and thus improves user exprience significantly.
Material Design Lite (MDL) : Icon Toggle
- A MDL Icon Toggle can be created using mdl-icon-toggle to create a container to hold icon toggle related content.
- To Create a icon toggle use input element with attribute type="checkbox", the attribute check is used to select values by Default.
Example:
<!-- Icon Toogle 1 -->
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-fav">
<input type="checkbox" id="icon-fav" class="mdl-icon-toggle__input" checked />
<!-- selected initially -->
<i class="mdl-icon-toggle__label material-icons">favorite</i>
</label>
<!-- Icon Toggle 2 -->
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-delete">
<input type="checkbox" id="icon-delete" class="mdl-icon-toggle__input" />
<i class="mdl-icon-toggle__label material-icons">delete</i>
</label>
Note:The value of the id attribute must be same as for attribute
Material Design Lite :Icon Toggle Classes
| MDL Class | Description |
|---|---|
| mdl-icon-toggle | To create a icon toggle Container |
| mdl-js-icon-toggle | To Assign MDL behaviour to icon toggle |
| mdl-icon-toggle__input | To create a icon toggle with basic MDL Features |
| mdl-icon-toggle__label | To Create a Label for Icons |
| mdl-js-ripple-effect | To apply a ripple effect when clicked |